<script lang="ts" setup>
import { getTaskStatusClass, useFlowStore } from '../../flowStore'

import ApproverComponent from '../approver-component/index.vue'
import OperateBtn from '../component/operate-btn/index.vue'
import ConditionComponent from '../condition-component/index.vue'
import EndComponent from '../end-component/index.vue'
import ParallelComponent from '../parallel-component/index.vue'
import TriggerComponent from '../trigger-component/index.vue'

const props = defineProps(["node"])

const flowStore = useFlowStore()

</script>
<template>
    <div class="flow-node">
        <div :class="[getTaskStatusClass(flowStore.mode, node.taskStatus), { 'info': flowStore.mode === '2' }, 'flow-node-btn']"
            @click="flowStore.openNode(props.node.nodeId)">
            流程开始
        </div>
        <div class="flow-operate">
            <operate-btn :node="props.node" />
        </div>
        <div v-for="child in props.node.children" :key="child.nodeId" class="flow-node-container">

            <approver-component v-if="child.nodeType === '1'" :node="child" />

            <condition-component v-if="child.nodeType === '2'" :node="child" />

            <parallel-component v-if="child.nodeType === '4'" :node="child" />

            <trigger-component v-if="child.nodeType === '6'" :node="child" />

            <end-component v-if="child.nodeType === '9'" :node="child" />
        </div>
    </div>
</template>
<style scoped></style>